<template>
    <div class="wai">
       <van-search class="" shape="round"  background="blue" v-model="value" input-align="center" placeholder="请输入搜索关键词" />
        <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
  <van-swipe-item v-for="(item) in lbshuzu" :key="item.id">
    <img :src="item.bannerUrl" alt="">
  </van-swipe-item>
</van-swipe>
        <h3>猜你喜欢</h3>
            <p>
                <span :class="{active:currentindex == index}" @click="dian(index)" v-for="(item,index) in si" :key="index"> {{item}}</span>
            </p>
            <section>
                <span>年或姐惹毛</span>
                <span>津贴联盟</span>
                <span>品质联盟</span>
                <span>雄安联盟</span>
            </section>

            <ul>
                <li v-for="(item,index) in sjshuzu" :key="index">
                    <img :src="item.picUrl" alt="">
                    <section>
                        <div>
                            <h3>{{item.name}}</h3>
                        </div>
                        <div>
                            <p>
                                <van-icon name="star" />
                                <span>{{item.wmPoiScore/10}}</span>
                            </p>
                            <p>
                              {{ item.monthSalesTip}}
                            </p>
                        </div>
                        <div>
                            <p>
                               <span>{{item.minPriceTip}}</span>
                                <span>{{item.shippingFeeTip}}</span>
                            </p>
                            <p>
                            <span>{{item.distance}}</span>
                            <span>{{item.deliveryTimeTip}}</span>
                            </p>
                        </div>
                        <div>
                            <span v-for="(ele,index) in item.discounts2" :key="index">{{ele.info}}</span>
                        </div>
                    </section>
                </li>
            </ul>
    </div>


</template>

<script setup>
import {lunbo,shangjia} from '@/util/api'
import { onMounted,ref } from 'vue'
var lbshuzu=ref([])
var sjshuzu=ref([])
var currentindex=ref(0)
var si=ref(['综合排序','销量最高','离我最近','筛选'])
var dian=(index)=>{
    currentindex.value=index
    if(index==1){
        sjshuzu.value.sort((a,b)=>{
           
            return  parseInt(b.monthSalesTip.slice(2,9))- parseInt(a.monthSalesTip.slice(2,9))
        })
    }
    if(index==2){
        sjshuzu.value.sort((a,b)=>{
           
            return  parseFloat(a.distance)- parseFloat(b.distance)
        })
    }
}
onMounted(()=>{
    lunbo().then(res=>{
     
        lbshuzu.value=res.data.list
    })
    shangjia().then(res=>{
        console.log(res.data.list)
        
        sjshuzu.value=res.data.list
    })
})

</script>

<style scoped>
ul{
    height: 400px;
    overflow: auto;
}
ul,li{
    list-style: none;
}
ul>li{
    padding: 15px;
    display: flex;
    justify-content: space-between;
}
ul>li>section{
    flex: 1;
    
}
ul>li>section>div:nth-child(1)>h3{
   font-size: 16px;

}
ul>li>section>div:nth-child(2){
  display: flex;
  margin-top: 6px;
  align-items: center;

}
ul>li>section>div:nth-child(3){
  display: flex;
  /* margin-top: 6px; */
  align-items: center;
  font-size: 12px;
  justify-content: space-between;

}
ul>li>section>div:nth-child(3) span{
 margin-right: 3px;

}
ul>li>section>div:nth-child(4){
  display: flex;
  /* margin-top: 6px; */
  align-items: center;
  font-size: 12px;
 flex-wrap: wrap;

}
ul>li>section>div:nth-child(4) span{
 margin-right: 3px;
 padding: 3px;
 background: red;
 color: white;
    margin-bottom: 3px;
}
ul>li>section>div:nth-child(2)>p{
   font-size: 12px;
    margin-right: 5px;
}
ul>li>section>div:nth-child(2)>p:first-child{
  color: orange;
}
ul img{
    width: 100px;
}
.wai>section{
    display: flex;
    padding-left: 15px;
    padding-right: 15px;
    justify-content: space-between;
}
.wai>section>span{
   padding: 3px;
   background: #ccc;
}
.wai>p{
    padding: 15px;
    padding-top: 0;
    display: flex;
    justify-content: space-between;
}
.wai>p>.active{
    font-weight: bold;
}
    .shuru input{
        width: 200px;
    }
    .my-swipe{
        margin: 15px;
    }
    .my-swipe img{
        width: 100%;
        border-radius: 20px;
    }
    .wai>h3{
        padding-left: 15px;
    }
    *{
        margin: 0;
        padding: 0;
    }
</style>